<template>
    <view class="wrap">
        <!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
        <image
            src="../../static/index/cart.png"
            mode=""
            @click="$func.jump('/yCreate/pages/shoppingCart')"
            class="cart"
        ></image>
        <view class="top">
            <!-- <view :style="'height:' + top +'px'"></view> -->
            <!-- class="u-flex u-row-between" -->
            <view :style="'padding-top:' + statusBarHeight + 'rpx'">
                <view class="u-flex top_add" @click="addShow = true">
                    <view class="top_add_text"
                        >按地区选择商品
                        <text style="margin-left: 25rpx">{{ city }}</text>
                    </view>
                    <image
                        src="@/static/wImg/blaSan.png"
                        class="top_san"
                    ></image>
                </view>
                <view class="u-flex top_sea flex-one">
                    <image
                        src="@/static/wImg/greySea.png"
                        class="top_sea_img"
                    ></image>
                    <input
                        type="text"
                        @input="mescroll.resetUpScroll()"
                        v-model="keywords"
                        placeholder-style="color:#B0B0B0;"
                        placeholder="输入您想要的内容"
                    />
                </view>
            </view>
            <scroll-view
                class="u-flex claWrap"
                scroll-x
                :scroll-into-view="scrollID"
            >
                <block v-for="(item, index) in list" :key="index">
                    <view
                        class="claItem u-flex-col u-flex-center"
                        @click="claClick(index, item.id)"
                        :class="cateid == item.id ? 'claCss' : ''"
                        :id="`tab_${index + 1}`"
                    >
                        <image :src="item.image"></image>
                        <view class="cla_text u-flex-center">{{
                            item.name
                        }}</view>
                    </view>
                </block>
            </scroll-view>
        </view>
        <view class="foot">
            <view class="fot_left">
                <view
                    class="left_item u-flex-center"
                    @click="leftClick(index)"
                    :class="index == leftIndex ? 'left_css' : ''"
                    v-for="(item, index) in LeftList"
                    :key="index"
                >
                    {{ item.name }}
                    <view class="left_line" v-if="index == leftIndex"></view>
                </view>
            </view>
            <view class="fot_right">
                <!-- <image src="@/static/yCreate/ceshi.png" mode="aspectFill" class="rig_img"></image> -->
                <!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="rig_img">
					<swiper-item style="width: 100%;height: 100%;" v-for="(item,index) in banner" :key="index">
						<view class="swiper-item">
							
						</view>
					</swiper-item>
				</swiper> -->
                <!-- <image :src="configInfo.cate_img_url" mode="aspectFill" class="rig_img" @click="goRich(4)"></image> -->
                <!-- <view class="flex align-center margin-top-20">
					<image src="../../static/logo.png" mode="" class="shopimg"></image>
					<view class="flex-one margin-left-20">
						<view class="rig_tit text-26 text-bold text-cut-two height-70 line-35">
							<text class="mark markGreen">平台</text>
							标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
						</view>
						<view class="demo-tag margin-top-15">
							<view class="demo-tag-text">
								标签
							</view>
						</view>
						<view class="demo-price">
							<text>￥</text>111
							<text class="demo-price-grey">￥222</text>
						</view>
					</view>
				</view> -->
                <mescroll-body
                    :sticky="true"
                    @init="mescrollInit"
                    @down="downCallback"
                    @up="upCallback"
                    :height="1"
                >
                    <view>
                        <view
                            class="right_item u-flex"
                            @click="
                                $func.jump('/wNew/pages/detail?id=' + item.id)
                            "
                            v-for="item in flowList"
                        >
                            <image
                                :src="item.image"
                                mode="aspectFill"
                                class="rig_item_img"
                            ></image>
                            <view style="flex: 1">
                                <view
                                    class="rig_tit"
                                    style="
                                        margin-top: 20rpx;
                                        display: flex;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 2;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        flex: 1;
                                        line-height: 40rpx;
                                    "
                                >
                                    <text
                                        class="mark markGreen"
                                        v-if="item.shop.isself == 1"
                                        >平台</text
                                    >
                                    <text class="mark" v-else>商家</text>
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_bk == 1"
                                        >折扣</text
                                    >
                                    {{ item.title }}
                                </view>
                                <view class="demo-tag">
                                    <view
                                        class="demo-tag-text"
                                        v-for="(items, indexs) in item.json"
                                        :key="indexs"
                                    >
                                        {{ items }}
                                    </view>
                                </view>
                                <view class="demo-price">
                                    <text>￥</text>{{ item.price }}
                                    <text class="demo-price-grey"
                                        >￥{{ item.hx_price }}</text
                                    >
                                </view>
                            </view>
                        </view>
                    </view>
                </mescroll-body>
            </view>
        </view>
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#888"
            :list="tabList"
        ></u-tabbar>
        <!-- <u-picker v-model="addShow" mode="region"></u-picker> -->
        <view class="layer" v-if="addShow">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="addShow = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()"
                        >确定</view
                    >
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist3">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist3"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            scrollID: "tab_1",
            scrollID2: "",
            top: 0,
            addShow: false,
            claIndex: 0,
            leftIndex: 0,
            list: [],
            flowList: [],
            LeftList: [],
            keywords: "",
            tabList: [
                {
                    iconPath: "/static/tab/shouye_nor.png",
                    selectedIconPath: "/static/tab/shouye_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "/static/tab/wode_nor.png",
                    selectedIconPath: "/static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            current: 1,
            banner: "",
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            multiIndex: [0, 0, 0],
            indicatorStyle: "height: 80rpx;",
            city: "全国",
            cateid: "",
            statusBarHeight: 0,
            flid: "",
            location_city: "",
            location_city2: "",
        };
    },
    watch: {
        tabList: {
            handler(newVal, oldVal) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    newVal.forEach((item, index) => {
                        if (item.text == "直播" || item.text == "动态") {
                            newVal.splice(index, 1);
                        }
                    });
                }
            },
            deep: true,
            immediate: true,
        },
    },
    computed: mapState({
        configInfo: (state) => state.config.configInfo,
    }),
    onLoad(options) {
        console.log(options, "options");
        if (options.second) {
            this.cateid = options.second;
        }
        if (options.third) {
            this.leftIndex = options.third;
        }
        if (options.rowIndex) {
            this.scrollID2 = `tab_${Number(options.rowIndex) + 1}`;
            console.log(this.scrollID, "this.scrollID");
        }
        uni.getSystemInfo({
            success: (res) => {
                // 状态栏的高度
                this.statusBarHeight = res.statusBarHeight + 30;
            },
        });
        if (options.id) {
            // this.cateid = options.id
            this.flid = options.id;
            uni.setStorageSync("category_id", options.id);
            // this.LeftList = this.list[this.claIndex].childlist
        }
        if (uni.getStorageSync("city")) {
            this.city = "全国";
        } else {
            this.city = "全国";
        }
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.top == 0) {
            this.top = 20;
        } else {
            this.top = res.safeAreaInsets.top;
        }
        this.classFn();
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
    },
    methods: {
        claClick(index, id) {
            this.cateid = id;
            this.claIndex = index;
            this.leftIndex = 0;
            this.LeftList = this.list[this.claIndex].childlist;
            this.mescroll.resetUpScroll();
            uni.setStorageSync("category_id", id);
        },
        leftClick(index) {
            this.leftIndex = index;
            this.mescroll.resetUpScroll();
        },
        classFn() {
            this.$u
                .post("/api/index/get_category", {
                    category_id: this.flid,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.list = res.data.category;
                        if (this.cateid) {
                            let index = res.data.category.findIndex(
                                (item) => item.id == this.cateid
                            );
                            console.log(index);
                            let timeindex = index == -1 ? 0 : index;
                            this.cateid = this.cateid
                                ? this.cateid
                                : res.data.category[timeindex].id;
                            this.LeftList = this.list[timeindex].childlist;

                            uni.setStorageSync("category_id", this.cateid);
                        } else {
                            this.cateid = this.cateid
                                ? this.cateid
                                : res.data.category[0].id;
                            this.LeftList = this.list[this.claIndex].childlist;
                            uni.setStorageSync("category_id", this.cateid);
                        }
                        this.banner = res.data.banner;
                        setTimeout(() => {
                            this.mescroll.resetUpScroll();
                            this.scrollID = this.scrollID2;
                        }, 300);
                    }
                });
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/wanlshop/product/lists", {
                    page: page.num,
                    // limit: page.size,
                    search: this.keywords,
                    sort: "weigh",
                    order: "asc",
                    filter: JSON.stringify({
                        category_id: this.LeftList[this.leftIndex].id,
                    }),
                    op: '{"category_id": "in"}',
                    type: "goods",
                    location_city: this.location_city,
                    location_city2: this.location_city2,
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        changeTab(e) {
            if (uni.getStorageSync("configInfo").live_switch !== 0) {
                if (e == 0) {
                    this.$func.jump("/wNew/pages/index");
                } else if (e == 3) {
                    this.$func.jump("/pages/dyamicshop?children=2");
                } else if (e == 2) {
                    this.$func.jump("/live/pages/live/liveList?type=1");
                } else if (e == 4) {
                    this.$func.jump("/pages/mine");
                }
            } else {
                if (e == 0) {
                    this.$func.jump("/wNew/pages/index");
                } else if (e == 2) {
                    this.$func.jump("/pages/mine");
                }
            }
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [
                    this.multiIndex[0],
                    this.multiIndex[1],
                    curMultiIndex[2],
                ];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            var dz =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name;
            var dy =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name +
                "/" +
                this.arealist1[i].children[j].children[k].name;
            this.location_city = dz;
            this.location_city2 = dy;
            uni.setStorageSync("location_city", dz);
            uni.setStorageSync("location_city2", dy);
            this.city =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name +
                "/" +
                this.arealist1[i].children[j].children[k].name;
            this.addShow = false;
            this.$u
                .post("/api/wanlshop/product/lists", {
                    page: 1,
                    search: this.keywords,
                    sort: "weigh",
                    order: "asc",
                    filter: JSON.stringify({
                        category_id: this.LeftList.length
                            ? this.LeftList[this.leftIndex].id
                            : "",
                    }),
                    op: '{"category_id": "in"}',
                    type: "goods",
                    location_city: dz,
                    location_city2: dy,
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    this.flowList = res.data.data; //追加新数据
                });
        },
        goRich(type) {
            uni.navigateTo({
                url: "/pages/rich?type=" + type,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(@/components/common.css);
.cart {
    width: 140rpx;
    height: 140rpx;
    position: fixed;
    bottom: 200rpx;
    border-radius: 50%;
    background: #fff;
    right: 20rpx;
    z-index: 9999;
    font-size: 28rpx;

    image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 7rpx;
    }
}

.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top {
    padding: 20rpx 30rpx 50rpx;
    background-image: linear-gradient(to right, #dbdfff, #dbdfff);

    .top_add {
        .top_add_text {
            // width: 120rpx;
            font-size: 24rpx;
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
            display: flex;
            align-items: center;
        }

        .top_san {
            width: 22rpx;
            height: 10rpx;
            margin-left: 10rpx;
        }
    }

    .top_sea {
        flex: 1;
        margin: 20rpx 0;
        height: 60rpx;
        padding: 0 18rpx;
        border-radius: 20rpx;
        background: #fff;
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .top_sea_img {
            width: 25rpx;
            height: 23rpx;
        }

        input {
            color: #b0b0b0;
            height: 20rpx;
            font-size: 24rpx;
            padding: 0 18rpx;
            margin-left: 18rpx;
            border-left: 1rpx solid #b0b0b0;
        }
    }

    .claWrap {
        margin-top: 30rpx;
        overflow-x: auto;
        overflow-y: hidden;

        .claItem {
            margin-right: 20rpx;

            image {
                width: 88rpx;
                height: 88rpx;
                border-radius: 50%;
                background: #fff;
                // padding: 10rpx;
                margin-bottom: 16rpx;
            }

            .cla_text {
                width: 104rpx;
                height: 32rpx;
                font-size: 22rpx;
                border-radius: 40rpx;
            }
        }

        .claCss {
            image {
                border: 1rpx solid #606dce;
            }

            .cla_text {
                color: #fff;
                background: #606dce;
            }
        }
    }
}

.foot {
    flex: 1;
    margin-top: 12rpx;
    position: relative;

    .fot_left {
        width: 200rpx;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0rpx;
        overflow-y: auto;

        .left_item {
            height: 88rpx;
            background: #fff;
            position: relative;
        }

        .left_line {
            width: 6rpx;
            height: 60rpx;
            position: absolute;
            top: 15rpx;
            left: 0;
            background: #606dce;
            border-radius: 40rpx;
        }

        .left_css {
            background: #dbdfff;
        }
    }

    .fot_right {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 200rpx;
        bottom: 0rpx;
        padding: 0 30rpx;
        overflow-y: auto;

        .rig_img {
            width: 504rpx;
            height: 208rpx;
            border-radius: 20rpx;
        }

        .right_item {
            background: #fff;
            border-radius: 20rpx;
            padding: 10rpx;
            margin-top: 20rpx;

            .rig_item_img {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .rig_tit {
                font-size: 26rpx;
                color: #333;
                font-weight: bold;
            }

            .mark {
                white-space: nowrap;
                font-size: 20rpx;
                color: #fff;
                padding: 6rpx 10rpx;
                background: #ef5205;
                border-radius: 4rpx;
                margin-right: 10rpx;
            }

            .markGreen {
                background: #606dce;
            }

            .demo-tag {
                display: flex;
                margin-top: 5px;
            }

            .demo-tag-text {
                margin-bottom: 10rpx;
                border: 1px solid #f43000;
                color: #f43000;
                margin-left: 8px;
                line-height: 1;
                padding: 8rpx 24rpx 8rpx 16rpx;
                display: flex;
                align-items: center;
                border-radius: 4rpx;
                font-size: 20rpx;
            }

            .demo-tag-text-grey {
                border: 1px solid #999;
                color: #999;
            }

            .demo-price {
                font-size: 30rpx;
                color: $u-type-error;
                font-weight: bold;
                font-size: 32rpx;

                text {
                    font-size: 20rpx;
                }

                .demo-price-grey {
                    color: #d3d3d3;
                    font-size: 20rpx;
                    font-weight: 400;
                    margin-left: 18rpx;
                    text-decoration: line-through;
                }
            }
        }
    }
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.shopimg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 10rpx;
}
.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #ef5205;
    border-radius: 4rpx;
    margin-right: 20rpx;
}
.demo-tag {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-left: -8rpx;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    margin-bottom: 10rpx;
    border: 1px solid #f43000;
    color: #f43000;
    margin-left: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 24rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}
.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}
/deep/.uni-scroll-view-content {
    display: flex;
}
</style>